<template>
  <div class="app-container">
  <div class="top-filter">
      <!-- <el-button type="primary"  @click="handleAdd" size="lg">添加</el-button> -->
      <el-button type="primary" @click="handleBatch">批量收回</el-button>
    </div>

    <my-data-table status="SEND" @selection-change="handleSelectionChange" ref="dataTable">

      <el-table-column slot="first-column" type="selection" fixed width="55"> </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" slot="operator" width="80">
        <template slot-scope="scope">
          <!-- <el-button type="text" @click="createSingleB(scope.row)">签署安全承诺书</el-button> -->

          <el-button type="text" @click="handleSendback(scope.row.id)">收回</el-button>
        </template>
      </el-table-column>
    </my-data-table>
    <batch-back-pop
      :visible="batchPop"
      :list="selection"
      @batchBackSuccess="handleBatchSuccess"
      @batchBackHide="handleBatchHide"
    ></batch-back-pop>
     <batch-start-proposal
      :visible="batchProposalPop"
      :list="selection"
      @batchProposalSuccess="handleBatchProposalSuccess"
      @batchProposalHide="handleBatchProposalHide">

    </batch-start-proposal>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import BatchBackPop from './components/batchBack.vue';
import MyDataTable from './components/table.vue';
import BatchStartProposal from './components/batchStartProposal.vue';


export default {
  components: { BatchBackPop, MyDataTable, BatchStartProposal },
  data() {
    return {
      batchProposalPop: false,
      batchPop: false, // 批量发起弹窗
      selection: [],
    };
  },

  methods: {
    // 批量收回
    handleBatch() {
      if (!this.selection.length) {
        return Message({
          type: 'warning',
          message: '请先选择人员',
          duration: 5 * 1000,
        });
      }
      this.batchPop = true;
    },
    handleBatchProposalSuccess() {
      this.batchProposalPop = false;
      this.$refs.dataTable.onReset();
    },
    handleBatchProposalHide() {
      this.batchProposalPop = false;
    },
    handleBatchSuccess() {
      this.batchPop = false;
      this.currentPage = 1;
      this.$refs.dataTable.onReset();
    },
    handleBatchHide() {
      this.batchPop = false;
    },
    handleSelectionChange(val) {
      this.selection = val;
    },
    createSingleB(data) {
      this.selection = [data];
      this.batchProposalPop = true;
    },

    // 单个收回
    async handleSendback(Id) {
      const worker = this.$refs.dataTable.list.find(v => v.id === Id);
      this.selection = [worker];
      this.batchPop = true;
    },
  },
};
</script>
<style scoped>
.top-filter {
  margin-bottom: 20px;
}
</style>
